import React from 'react';
import ReactDOM from 'react-dom';
import VtxCarousel from '../components/VtxCarousel/VtxCarousel';
import ReactEcharts from 'echarts-for-react';
import {Icon} from 'antd';
import styles from './lunboDemo.less';

const LunBoDemo = ({ dispatch}) => {
	let option = {
	    title : {
	        text: '某站点用户访问来源',
	        subtext: '纯属虚构',
	        x:'center'
	    },
	    tooltip : {
	        trigger: 'item',
	        formatter: "{a} <br/>{b} : {c} ({d}%)"
	    },
	    legend: {
	        orient: 'vertical',
	        left: 'left',
	        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
	    },
	    series : [
	        {
	            name: '访问来源',
	            type: 'pie',
	            radius : '55%',
	            center: ['50%', '60%'],
	            data:[
	                {value:335, name:'直接访问'},
	                {value:310, name:'邮件营销'},
	                {value:234, name:'联盟广告'},
	                {value:135, name:'视频广告'},
	                {value:1548, name:'搜索引擎'}
	            ],
	            itemStyle: {
	                emphasis: {
	                    shadowBlur: 10,
	                    shadowOffsetX: 0,
	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
	                }
	            }
	        }
	    ]
	};

	return(
		<div className={styles.wrapper}>
			<VtxCarousel 
				interval={15000} 
				number={5} 
				direction='right'
				boxStyle={styles.content} 
				leftIcon={<Icon type="step-backward" />}
				rightIcon={<Icon type="step-forward" />}
			>  
				<ReactEcharts option={option} notMerge={true} lazyUpdate={true} theme={"theme_name"} style={{height:'100%',padding:'10px'}}/>
				<img src='http://upload-images.jianshu.io/upload_images/971705-6d38b15221a904c9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'/>
				<img src='http://upload-images.jianshu.io/upload_images/971705-1ebf3743a7d163c7.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'/>
				<img src='http://upload-images.jianshu.io/upload_images/971705-1158b127a710879a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'/>
				<img src='http://upload-images.jianshu.io/upload_images/971705-2c8d6d5d8d3b59bc.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'/>
			</VtxCarousel>
		</div>
	)
}
export default LunBoDemo;